// 逻辑编排输入框
import { useCallback, useEffect, useState } from 'react';
import {Button, Popover} from 'antd';
import { MetaDataFactory } from '@inbiz/basic/MetaDataFactory'
import css from './ControllerInput.less'
import { useDesigner } from '@inbiz/react';
export function ControllerInput (props: {
    value?: string //{type?:string, value?:string}
    onChange?: (v: string) => void
    onBlur?:() => void
    inTable?: boolean
}){
    const [value, $value] = useState<{type?:string, value?:string}>({});
    useEffect(() => {
        $value(props.value ? JSON.parse(props.value) : {})
    }, [props.value]);
    const [visible, $visible] = useState(props.inTable ? true : false);
    const designer = useDesigner();
    const handleOk = useCallback(() => {
        props.onChange?.(JSON.stringify(value))
        props.onBlur?.();
        $visible(false);
    }, [value, props])
    return <Popover 
        visible={visible} 
        destroyTooltipOnHide
        content={
            <>
                <MetaDataFactory
                    cls="dataQuery"
                    onChange={(value) => {
                        $value(old => ({...old, ...value}))
                    }}
                    isDesigner={!designer}
                    value={value}
                    metaDataWidgets={[
                        {
                            type: 'DataTypeSelect',
                                props: {
                                    datakey: 'type',
                                    link: 'value'
                                },
                            },
                        {
                            type: 'ValueTypeSelect',
                            props: {
                                datakey: 'value',
                                link: 'type'
                            },
                        }
                    ]} 
                />
                <div className={css.footer}>
                    <Button type="primary" onClick={handleOk}>确定</Button>
                    <Button onClick={() => {
                        $visible(false)
                        props.onBlur?.();
                    }}>取消</Button>
                </div>
            </>
        }>
        {
            props.inTable ? props.value :  <a href="javascript:;" className={css.show} onClick={() => $visible(true)}>{value?.value || '配置'}</a>
        }
    </Popover>
}
